<template>
  <div class="rightNav">
    <!-- https://www.jianshu.com/p/09de2864657a -->
    <!-- <div class="list-item" v-for="(item, index) in list" :key="index">
      <div class="item-name">
        <span>{{item.name}}</span>
      </div>
      <slot :a=item></slot>
      <div v-if="item.children" class="children-item">
        <Recursive :list="item.children">
          <template slot="g">灰常美丽的巨兔12137</template>
        </Recursive>
      </div>
    </div>-->
    <ul class="tab-nav">
      <li v-for="(i,index) in navList" :key="index">
        <div class="nav" @click="openNav(index,i.list.length)">
          <i class="el-icon-s-home"></i>
          <span>{{i.title}}</span>
          <i v-if="i.list.length" id="right-btn" class="el-icon-arrow-right">1</i>
        </div>
        <div class="nav-n-box">
          <div class="nav-n" v-for="(n,index) in i.list" :key="index">
               <!-- <Recursive :navList="n.list">
          
        </Recursive> -->
              {{n.title}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  methods: {
    openNav(index, num) {
      let _this = this;
      let nav = document.querySelectorAll(".nav"); //获取父级菜单栏，以便添加选中样式
      let items = document.querySelectorAll(".nav-n-box"); //获取容纳子级菜单栏的容器，以便动态设置高度，实现下拉效果

      //-----------------可注释部分开始------注释后则不是手风琴效果------------------
      // 遍历菜单栏，移除所有选中后的样式   添加此段可实现手风琴效果，注释则实现多展示效果
      for (let i = 0; i < nav.length; i++) {
        // nav[index].classList.contains("nav-n-box-active") 判断标签内是否含有该class属性，以布尔值类型返回
        if (
          items[i].style.height == "" ||
          items[i].style.height == "0rem" ||
          nav[index].classList.contains("nav-n-box-active")
        ) {
          let height = items[index].style.height;
          items[index].style.height = height;
        } else {
          items[i].style.height = "0rem";
        }
        nav[i].classList.remove("nav-n-box-active");
      }
      //-----------------可注释部分结束------------------------

      //根据子菜单栏的高度判断，是否展开菜单栏，若有进行遍历操作，那么每次点击某个菜单栏的时候 height 都为 0
      if (
        items[index].style.height == "" ||
        items[index].style.height == "0rem"
      ) {
        //num 为子菜单栏的个数，根据子菜单栏确定容器的高度
        items[index].style.height = num * 2 + "rem";
        //添加右箭头旋转样式
        nav[index].classList.add("nav-n-box-active");
      } else {
        items[index].style.height = "0rem";
        //移除右箭头旋转样式
        nav[index].classList.remove("nav-n-box-active");
      }
      //------------------------------------------
    }
  },
  name: "Recursivelist",
  props: {
    navList: {
      type: Array
    }
  },
  data() {
    return {};
  },
  mounted() {
    // console.log("recursive", this.list);
  }
};
</script>
<style lang="less">
.rightNav {
  position: fixed;
  width: 65%;
  height: 100%;
  top: 30px;
  left: 0%;
  background: rgb(109, 106, 106);
  z-index: 100;
  max-width: 200px;
  & .tab-nav {
    padding: 1rem;
    list-style: none;
    & li {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      cursor: pointer;
      user-select: none;
      & .nav {
        padding: 1rem 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        & i {
          transition: 0.3s;
          color: rgb(0, 225, 255);
        }
        & span {
          display: inline-block;
          width: 100%;
          text-align: left;
          color: #808080;
          font-size: 0.88rem;
          margin-left: 1rem;
        }
      }
      & .nav-n-box {
        transition: 0.3s;
        width: 100%;
        height: 0;
        overflow: hidden;
        & .nav-n {
          width: 100%;
          font-size: 0.88rem;
          color: #808080;
          height: 2rem;
          text-align: left;
          padding-left: 2rem;
          line-height: 2rem;
          transition: 0.3s;
          &:hover {
            background: rgb(0, 225, 255);
            color: white;
            opacity: 0.5;
          }
        }
      }
    }
  }
}
//点击后右箭头的反转效果
.nav-n-box-active {
  #right-btn {
    transform: rotate(90deg) !important;
  }
}
</style>